<template>
  <el-card class="box-card h100" :style="themeOpacity">
    <div slot="header" :class="['clearfix', isDraggable ? 'draggable-move-clazz' : '']">
      <span>最新公告</span>
    </div>
    <el-row :gutter="5">
      <el-col :span="24" class="card-one-item" v-for="item in data" >
		  <div @click='btn_url(item)'>
			<el-row class="mb10" >
			  <el-col :span="15" class="card-introd">
			    <span class="theme-less-font-color">[最新公告]</span>
			    <span >{{item.docSubject}}</span>
			  </el-col>
			  <el-col :span="8" :offset="1" class="card-info font-gray" >
			    <span>{{item.fdName}}</span>
			    <span>{{item.docPublishTime.split("T")[0]}}</span>
			  </el-col>
			</el-row>
		  </div>

      </el-col>
	  <div class="gdbox card-one-item el-col el-col-24" @click="more_url()" v-if="data.length>0">
	  		  查看更多
	  </div>
    <!--  <el-col :span="24" class="card-one-item">
        <el-row class="mb10">
          <el-col :span="15" class="card-introd">
            <span class="theme-less-font-color">[通知公告]</span>
            <span>关于召开2020年高级职称评审答辩</span>
          </el-col>
          <el-col :span="8" :offset="1" class="card-info font-gray">
            <span>人力支援部</span>
            <span>2021-04-01</span>
          </el-col>
        </el-row>
      </el-col> -->

	  <div class="z_box" v-show="show">
	  	<div class="box">
	  		<i class="el-icon-close close" @click='close()'></i>
	  		<div class="title">{{obj.docSubject}}</div>
	  		<div v-html='obj.docContent' class="content">
	  		</div>
	  		<div class="download-wrapper">
	  		   <div v-for="(item,index) in obj.oaAttachList" :key="item.fdFileId" v-show="obj.oaAttachList.length > 0">
	  		     <el-link @click="gotoFilePage(item.fdFileId)" type="primary" class="download-href"
	  		       >附件{{index+1}}: {{item.fdFileName}}</el-link
	  		     >
	  		   </div>
	  		 </div>
	  	</div>
	  </div>
    </el-row>
  </el-card>

</template>

<script>
  import { mixin } from '@/mixin'
  import {
  	getInfo
  } from '@/api/public/index.js'
	import {
		getOaNotice,
		getOa,
		getPost
	} from '@client/addHome/service'
  export default {
    name: 'Notice',
    data() {
      return {
		  data:[],
		  obj:'',
		  show: false,
		  obj:''
	  }
    },
    props: {
      isDraggable: {
        type: Boolean,
        default: false
      }
    },
    components: {},
	mounted() {
		getInfo().then(res=>{
			if(res.code==200){
				this.data=res.data.oaNotice
			}else{
				this.$message({
				        showClose: true,
				        message: res.msg
				      });
			}

		})
	},
	methods:{
		btn_url(item){

	    getOa(item.fdId).then(res => {
	    	if (res.code == 200) {
	    		this.obj=res.data
	    		this.show=true
	    	}
	    })
		},
		gotoFilePage(fdId) {
			if(fdId) {
			  window.open('javascript:window.name;', '<script>location.replace("http://office.ncpu.edu.cn/sys/attachment/sys_att_main/sysAttMain.do?method=view&fdId='+fdId+'")<\/script>');
			}
		},
		close(){
			this.show=false
		},
		more_url(){
			window.location.href="/client/notice?id=0"
		},
	},
    mixins: [mixin]
  }
</script>

<style scoped lang="scss">
  .card-one-item {
    .card-introd {
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-info {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }
  }
  .font-blue {
    color: #3672fe;
  }
  .z_box {
  	position: fixed;
  	left: 0;
  	top: 0;
  	width: 100%;
  	height: 100%;
  	background: rgb(0, 0, 0, 0.3);
  	z-index: 999;
  }

  .box {
  	position: absolute;
  	max-width: 2000px;
  	min-width: 1000px;
  	height: 600px;
  	background-color: #fff;
  	color: #000;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
  	border-radius: 10px;
  	display: flex;
  	flex-direction: column;
  }

  .content {
  	height: 90%;
  	overflow-y: scroll;
  	padding: 20px 30px;
  }

  .btn {
  	width: 100px;
  	position: absolute;
  	bottom: 10px;
  	right: 10px;
  }

  .title {
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	margin-top: 20px;
  	font-size: 20px;
  	font-weight: bold;
  	padding: 0 50px;
  }

  .close {
  	position: absolute;
  	right: 20px;
  	top: 10px;
  	font-size: 24px;
  }
  .mb10{cursor: pointer;}
  .font-gray span{white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;}
  .gdbox{font-size: 12px;color: #1890FF;text-align: center;cursor: pointer;}
  .download-wrapper {
    font-size: 18px;
    margin: 24px 12px 0;
    .download-href {
      margin-bottom: 10px;
    }
  }
</style>
